<template>
	<view>
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar">
			<view class="top_view"></view>
		</view>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<cu-custom bgColor="bg-gradual-blue">
			<block slot="content">打卡吧 呆宝</block>
		</cu-custom>
		<!-- #endif -->
		<view class="wrap">

			<view class="u-tabs-box ">
				<u-tabs-swiper ref="tabs" active-color="#3b95ed" :list="list" :current="current" @change="change"
					:is-scroll="false" swiperWidth="750" bar-width="60"></u-tabs-swiper>
			</view>
			<u-gap height="80"></u-gap>
			<swiper class="swiper-box " :current="swiperCurrent" @transition="transition"
				@animationfinish="animationfinish">
				<swiper-item class="swiper-item">
					<scroll-view :refresher-threshold="100" :refresher-triggered="refresherFlag"
						refresher-background="#F1F1F1" scroll-y style="height: 100%;width: 100%;">
						<view class="page-box yu-box ">
							<imt-calendar :selected="recordList" style="margin: 10rpx auto"></imt-calendar>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" :refresher-threshold="100"
						@refresherrefresh="reachTop" :refresher-enabled="true" :refresher-triggered="refresherFlag"
						refresher-background="#F1F1F1">
						<view class="padding-top">
							<uni-collapse>
								<uni-collapse-item title="待使用礼品劵" :open="true" :showArrow="true">
									<view class="padding-sm">
										<u-cell-group>
											<u-cell-item @click="openModel(item)" v-for="(item,index) in prizeList" v-if="!item.verificationTime"
												:icon="item.img" :title="item.name" :arrow="true"
												:icon-style="{color:'#0ebeaa'}"></u-cell-item>
										</u-cell-group>
									</view>
								</uni-collapse-item>
								<uni-collapse-item title="已核销礼品劵" :showArrow="true">
									<view class="padding-sm">
										<u-cell-group>
											<u-cell-item @click="openModel(item)" v-for="(item,index) in prizeList" v-if="item.verificationTime"
												:icon="item.img" :title="item.name" :arrow="true"
												:icon-style="{color:'#ddd'}"></u-cell-item>
										</u-cell-group>
									</view>
								</uni-collapse-item>
							</uni-collapse>
						</view>
						<u-modal v-model="showModel" :title="'劵码值：'+prize.prizeCode" :show-cancel-button="true"
							cancel-text="复制" @cancel="copyCode(prize.prizeCode)">
							<view class="slot-content padding">
								<view class="padding">
									<u-image width="100%" height="420rpx" :src="prize.codeUrl"
										@click="previewImage(prize.codeUrl)"></u-image>
								</view>
								<text>{{prize.description}}</text>
							</view>
						</u-modal>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item" v-if="isAdmin">
					<scroll-view scroll-y style="height: 100%;width: 100%;" :refresher-threshold="100"
						@refresherrefresh="reachTop" :refresher-enabled="true" :refresher-triggered="refresherFlag"
						refresher-background="#F1F1F1">
						<u-modal v-model="showModelVerify" :title="'劵码值：'+verifyPrize.prizeCode"
							:show-cancel-button="true" confirmText="核销" cancel-text="取消"
							@confirm="verifyPrizeCode(verifyPrize.prizeCode)">
							<view class="slot-content padding">
								<view class="padding">
									<u-image width="100%" height="420rpx" :src="verifyPrize.codeUrl"
										@click="previewImage(verifyPrize.codeUrl)"></u-image>
								</view>
								<text>{{verifyPrize.description}}</text>
							</view>
						</u-modal>
						<view class="padding">
							<view class="padding bg-white " style="border-radius: 10rpx;">
								<u-gap height="180"></u-gap>
								<view class="" style="position: relative;">
									<u-search input-align="center" searchIcon="" :showAction="false" v-model="prizeCode"
										@search="submitVerifyPrize" placeholder="劵码值" height="70">
									</u-search>
									<view class=""
										style="width: 100;height: 70; position: absolute; left: 24rpx; top: 10rpx; z-index: 9999;"
										@click="scanCode">
										<u-icon name="scan" style="" size="24px"></u-icon>
									</view>
								</view>
								<u-gap height="180"></u-gap>
							</view>
						</view>

					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import imtCalendar from 'components/yr/imt-calendar/imt-calendar'
	import uniCollapse from 'components/uni/uni-collapse/components/uni-collapse/uni-collapse'
	import uniCollapseItem from 'components/uni/uni-collapse/components/uni-collapse-item/uni-collapse-item'
	export default {
		data() {
			return {
				list: [{
						name: '打卡记录'
					},
					{
						name: '领奖记录'
					}
				],
				current: 0,
				swiperCurrent: 0,
				refresherFlag: false,
				dateList: [],
				prizeList: [],
				prize: {},
				showModel: false,
				isAdmin: false,
				prizeCode: undefined,
				recordList: [],
				verifyPrize: {},
				showModelVerify: false,
				itemList: [{
					head: "赏识在于角度的转换",
					body: "只要我们正确择取一个合适的参照物乃至稍降一格去看待他人，值得赏识的东西便会扑面而来",
					open: true,
					disabled: true
				}]
			}
		},
		onShow() {
			this.listRecord();
			this.listPrizeInstance();
		},
		onLoad() {
			this.share();
			this.authScanCode();
		},
		methods: {
			openModel(item) {
				this.prize = item;
				this.showModel = true;
			},
			reachTop() {
				this.refresherFlag = 'triggered';
				this.listPrizeInstance();
			},
			listPrizeInstance() {
				this.$u.api.listPrizeInstance().then(res => {
					this.prizeList = res.data;
					this.refresherFlag = false;
				});
			},
			listRecord() {
				this.$u.api.recordList().then(res => {
					this.recordList = res.data;
					console.log(this.recordList);
				});
			},
			// 页面数据
			// tab栏切换
			listTime() {
				this.$u.api.listTime().then(res => {
					this.dateList = res.data;
				});
			},
			change(index) {
				this.swiperCurrent = index;
			},
			transition({
				detail: {
					dx
				}
			}) {
				this.$refs.tabs.setDx(dx);
			},
			animationfinish({
				detail: {
					current
				}
			}) {
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			copyCode(prizeCode) {
				uni.setClipboardData({
					data: prizeCode,
					showToast: false,
					success: function() {
						uni.showToast({
							icon: 'none',
							duration: 2000,
							position: 'bottom',
							title: "已复制：" + prizeCode
						});
					}
				});
			},
			previewImage(url) {
				uni.previewImage({
					urls: [url]
				})
			},
			share() {
				uni.showShareMenu({
					title: '打卡吧呆宝'
				})
			},
			authScanCode() {
				this.isAdmin = this.vuex_user.roleId == 1;
				if (!this.isAdmin) {
					return;
				}
				if (this.list.length < 3) {
					this.list.push({
						name: '核销兑奖'
					})
				}
			},
			submitVerifyPrize() {
				this.getPrizeVoByPrizeCode(this.prizeCode)
			},
			scanCode() {
				let _this = this;
				wx.scanCode({
					success: (res) => {
						var prizeCode = res.result;
						console.log(prizeCode);
						_this.getPrizeVoByPrizeCode(prizeCode)
					}
				})
			},
			getPrizeVoByPrizeCode(prizeCode) {
				this.$u.api.getPrizeVoByPrizeCode(prizeCode).then(res => {
					console.log(res);
					if (res.success) {
						this.showModelVerify = true;
						this.verifyPrize = res.data;
					} else {
						uni.showToast({
							icon: 'none',
							duration: 2000,
							position: 'bottom',
							title: res.msg
						});
					}
				});
			},
			verifyPrizeCode(prizeCode) {
				this.$u.api.verifyPrize(prizeCode).then(res => {
					if (res.success) {
						uni.showToast({
							icon: 'none',
							duration: 2000,
							position: 'bottom',
							title: "核销成功"
						});
						this.listPrizeInstance();
					} else {
						uni.showToast({
							icon: 'none',
							duration: 2000,
							position: 'bottom',
							title: res.msg
						});
					}
				});
			}
		},
		components: {
			imtCalendar,
			uniCollapse,
			uniCollapseItem
		}
	}
</script>

<style lang="stylus" scoped>
.u-tabs-box
	position fixed
	width 100%
	z-index 99999
.status_bar
	height var(--status-bar-height)
	width 100%
	background-color #fff
	.top_view
		height var(--status-bar-height)
		width 100%
		position fixed
		background-color #fff
		top 0
		z-index 999
.yu-box
	padding 15rpx
	display flex
	flex-wrap wrap 
	.poetry-box
		width 50%
		.u-card__head
			padding 0 !important
.wrap
	display flex
	flex-direction column
	height calc(100vh - 120rpx)
	width 100%
.swiper-box
	flex 1
.swiper-item
	height 100%
.u-body-item-title
	font-weight 500
</style>
